<template>
  <view>
    <!-- 页面标题栏 -->
    <view class="smart-panel-head">
      <view class="smart-panel-head-title">view 布局演示</view>
    </view>

    <!-- 横向布局示例 -->
    <view class="smart-padding-wrap">
      <view class="layout-desc">flex-direction: row 横向布局</view>
    </view>
    <view class="smart-flex smart-row">
      <view class="flex-item smart-bg-red">A</view>
      <view class="flex-item smart-bg-green">B</view>
      <view class="flex-item smart-bg-blue">C</view>
    </view>

    <!-- 纵向布局示例 -->
    <view class="smart-padding-wrap">
      <view class="layout-desc">flex-direction: column 纵向布局（修正描述文本）</view>
    </view>
    <view class="smart-flex smart-column">
      <view class="flex-item-c smart-bg-red">A</view>
      <view class="flex-item-c smart-bg-green">B</view>
      <view class="flex-item-c smart-bg-blue">C</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style>
/* 标题栏样式 */
.smart-panel-head {
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
  background-color: #fff;
}
.smart-panel-head-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #000;
}

/* 布局描述文本样式 */
.smart-padding-wrap {
  padding: 20rpx 30rpx;
  background-color: #f5f5f5;
}
.layout-desc {
  font-size: 24rpx;
  color: #666;
}

/* flex 布局容器基础样式 */
.smart-flex {
  display: flex;
  margin: 0 30rpx 30rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  overflow: hidden;
}

/* 横向布局容器 */
.smart-row {
  flex-direction: row;
  height: 200rpx;
}

/* 纵向布局容器 */
.smart-column {
  flex-direction: column;
  height: 400rpx;
}

/* 横向布局子项：均分宽度 */
.flex-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  color: #fff;
}

/* 纵向布局子项：均分高度 */
.flex-item-c {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  color: #fff;
}

/* 背景色样式 */
.smart-bg-red {
  background-color: #ff4444;
}
.smart-bg-green {
  background-color: #00c853;
}
.smart-bg-blue {
  background-color: #33b5e5;
}
</style>